<template>
  <div class="JobPosting">
    <div class="title">服务管理-企业发布职位</div>
    <div class="Ltop">
      <el-button
        :style="topIndex==index?'color: #FFF;background-color: #409EFF;border-color: #409EFF;':''"
        v-for="(item,index) in btnlist"
        :key="index"
        type="primary"
        plain
        @click="doClick(item.sta)"
        class="top-button"
      >{{item.name}}</el-button>
    </div>
    <div class="Lcontent">
      <!--left-->
      <div class="Lconleft">
        <div
          class="LconleftBg"
          :style="leftIndex==index?'background: #409EFF':'background: white'"
          v-for="(item,index) in tableData"
          @click="doPostJobList(item,index)"
          :key="item.companyName"
        >
          <div class="Lconleft_box">
            {{item.companyName.length > 12 ? item.companyName.slice(0,12) + '...' : item.companyName}}
            <div class="Ltrial">{{item.checkState==1?'(试用)':''}}</div>
          </div>
          <!--如用户有修改内容则出现试用-->
          <div class="lfont" style="padding-right:10px" @click="toJobList(item.id)">
            <img src="../../assets/img/communication/add.png" alt />
          </div>
        </div>
      </div>
      <!--right-->
      <div class="LconRight">
        <div class="Ltabel">
          <el-table
            :header-cell-style="headcellStyle"
            :cell-style="cellStyle"
            :data="jobList"
            style="width: 100%"
          >
            <el-table-column align="center" prop="type" label width="80"></el-table-column>
            <el-table-column align="center" prop="name" label="职位名称" width="180"></el-table-column>
            <el-table-column align="center" prop="licenseTypeId" label="执业类型"></el-table-column>
            <el-table-column align="center" prop="rdtime" label="发布时间"></el-table-column>
            <el-table-column align="center" prop="ldate" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">{{msg}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-pagination
      style="text-align: right;margin-right: 40px"
      background
      @current-change="pageChange"
      :current-page.sync="query.currPageNo"
      :page-size="query.pageSize"
      layout="total,prev, pager, next"
      :total="query.total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'JobPosting',
  data() {
    return {
      query: { currPageNo: 1, pageSize: 9, total: 0 },
      leftIndex: 0,
      topIndex: 0,
      btnlist: [
        { name: '待审核', isActive: true, sta: 0 },
        { name: '审核通过', isActive: false, sta: 1 },
        { name: '不通过', isActive: false, sta: 2 }
      ],
      tableData: [],
      companyInfo: [],
      jobList: [],
      msg: '审核', //审核通过  msg=修改
      row: {}
    }
  },
  methods: {
    pageChange(val) {
      console.log('当前第' + val + '页')
      this.query.currPageNo = val
      this.doPostJobList(this.row, this.leftIndex)
    },
    toJobList(id) {
      this.$router.push('/Joblist?id=' + id)
    },
    doClick(obj) {
      console.log('index', obj)
      this.jobList = []
      this.btnlist.forEach(item => {
        item.isActive = false
      })
      this.topIndex = obj
      this.btnlist[obj].isActive = true
      this.msg = obj == 0 ? '审核' : '修改'
      this.lAxios({
        method: 'post',
        url: '/platform/getCompanyCooperation.do',
        params: {
          //传参
          state: obj
        }
      }).then(res => {
        //成功
        if (res.data.status == 0) {
          this.tableData = res.data.data['list']
          console.log('tabledata', this.tableData)
          localStorage.setItem(
            'staticData',
            JSON.stringify(res.data.data['staticRecords'])
          )
          //显示第一行信息
          //this.doJoblist(this.tableData[0],0)
          let ret = this.tableData.filter(item => item.id == this.row.id)
          if (this.row == {} || ret.length < 1) {
            this.doPostJobList(this.tableData[0], 0)
          } else {
            this.doPostJobList(this.row, this.leftIndex)
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleClick(row) {
      console.log('localstorage', this.companyInfo)
      localStorage.setItem('companyInfo', JSON.stringify(this.companyInfo))
      localStorage.setItem('jobRow', JSON.stringify(row))
      //2.存放按钮信息
      this.btnlist.forEach(itme => {
        if (itme.isActive == true) {
          localStorage.setItem('button', itme.name)
        }
      })
      this.$router.push({
        path: '/ServiceAudit',
        query: { companyId: row.companyId, id: row.id }
      })
    },
    doPostJobList(row, index) {
      this.row = row
      this.leftIndex = index
      this.companyInfo = row
      this.lAxios({
        method: 'post',
        url: '/platform/selectJobInfo.do',
        params: {
          companyId: row.id,
          state: this.topIndex,
          currPageNo: this.query.currPageNo,
          pageSize: this.query.pageSize
        }
      }).then(res => {
        console.log('dolist', res)
        if (res.data.status == 0) {
          this.jobList = res.data.data.list
          this.jobList.forEach(job => {
            if (job.jobState == 2) {
              job.type = '(已关闭)'
            }
          })
          this.query.total = res.data.data.total
        }
      })
    },
    doJoblist(row, index) {
      //console.log("dolist",row)
      this.companyInfo = row
      this.leftIndex = index
      this.jobList = row.jobList
    },
    headcellStyle({ row, column, rowIndex, columnIndex }) {
      return 'border:none;color:#1F2E4D'
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'border:none;'
    }
  },
  created() {
    if (this.$route.query.hasOwnProperty('type')) {
      this.topIndex = parseInt(this.$route.query.type)
      console.log('okt', parseInt(this.$route.query.type))
    }
    this.doClick(this.topIndex)
  },
  activated() {
    this.doClick(this.topIndex)
  }
}
</script>

<style lang="scss" scoped>
.JobPosting {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  overflow-x: hidden;
}
.title {
  height: 33px;
  line-height: 33px;
}
.el-button--primary {
  color: #1f2e4d;
  border: 1px solid #d3dbeb;
  background-color: #fff;
}
.Ltop {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px 0 20px 0;
}
.el-button--text {
  // border: 1px solid #3377ff;
  height: 40px;
  width: 70px;
  font-size: 14px;
  color: #3377ff;
}
.Ltop > button {
  height: 50px;
  width: 125px;
  /* border: 1px solid #797979; */
  /*background-color:#f2f2f2;*/
  font-size: 14px;
  margin-right: 10px;
  margin-left: 20px;
}
.Lcontent {
  /*height:473px ;*/
  /*background-color: #f2f2f2;*/
  /*border: 1px solid #797979;*/
  min-height: 70vh;
  display: flex;
  flex-direction: row;
}

.Lconleft {
  width: 280px;
  /*height: 473px;*/
  /* border: 1px solid #797979; */
  background-color: #fff;
  margin-right: 10px;
}

.LconleftBg {
  width: 273px;
  height: 40px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.LconleftBg:hover {
  background-color: #f7f9fc;
}

.LconRight {
  width: 80%;
  /*height: 473px;*/
  background-color: #fff;
}
.Ltabel {
  padding: 0 50px;
  border: none;
  color: #1f2e4d;
}
.Lconleft_box {
  flex: 1;
  padding-left: 20rpx;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  /* background-color: #f2f2f2; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 3px;
}

.lfont {
  width: 38px;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.Ltrial {
  height: 20px;
  font-size: 12px;
  color: #ff3399;
  position: absolute;
  top: 0px;
  right: 38px;
}
.active {
  background-color: #199ed8;
  color: #333;
}
.top-button {
  width: 140px;
  height: 40px;
  border: 1px solid #d3dbeb;
  border-radius: 4px;
  color: #1f2e4d;
  &:hover {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
